<template>
    <div class="home-page">
        <!-- 头部区域 -->
        <header>
            <!-- 项目标题 -->
            <p class="title-name">
                <span>城市管理大数据智慧平台</span>
            </p>
            <!-- 头部背景图 -->
            <div class="header-bg"></div>
            <!-- 头部底端光点 -->
            <div class="bottom-light"></div>
            <!-- logo -->
            <div class="logo"></div>
            <!--退出登录-->
            <div class="sign-out" @click="loginOut"></div>
        </header>
        <!-- 主体内容 -->
        <section class="main-box">
            <div class="content-area">
                <div class="content-area-info">
                    <div class="left-content-row">
                        <!-- 管辖面积 -->
                        <ul class="total-area">
                            <li class="over-area">
                                <span class="area-name">管辖面积</span>
                                <ul id="areaNumber" class="area-number" @click="clickNumber(0)"></ul>
                                <span class="area-unit">km²</span>
                            </li>
                            <li class="core-area">
                                <span class="area-name">核心管辖面积</span>
                                <span id="coreAreaNumber">712</span>
                                <span class="area-unit">km²</span>
                            </li>
                        </ul>
                        <!-- 地图上光点 -->
                        <div class="map-top-light"></div>
                        <!-- "各街镇边界"地图 -->
                        <div class="boundary-box">
                            <p class="boundary-name">
                                <span>各街镇边界</span>
                            </p>
                            <div id="boundaryMap">
                                <!--<div class="boundary-map"></div>-->
                                <img src="../assets/img/home/boundary-map.png" alt="">
                            </div>
                        </div>
                        <!-- 地图下光点 -->
                        <div class="map-bottom-light"></div>
                        <!-- 各街办面积统计图 -->
                        <div class="street-box">
                            <p class="street-name">
                                <span>各街办面积</span>
                                <span>（单位）km²</span>
                            </p>
                            <div id="streetMap"></div>
                        </div>
                    </div>
                    <div class="center-content-row">
                        <div class="center-top-box">
                            <div class="small-blocks">
                                <div class="left-border"></div>
                                <div class="right-border"></div>
                                <div id="smallBlockHtml" class="overflow-hidden"></div>
                            </div>
                            <div class="bottom-triangle"></div>
                        </div>
                        <div class="big-blocks">
                            <ul>
                                <!-- 党建引领 -->
                                <li id="partyBuilding" class="every-block" @click="clickBigBlock(1)">
                                    <div class="block-content">
                                        <div class="block-image">
                                            <img src="" alt="">
                                        </div>
                                        <p>党建引领</p>
                                    </div>
                                </li>
                                <!-- 数字化城管 -->
                                <li id="cityManagement" class="every-block" @click="clickBigBlock(2)">
                                    <div class="block-content">
                                        <div class="block-image">
                                            <img src="" alt="">
                                        </div>
                                        <p>数字化城管</p>
                                    </div>
                                </li>
                                <!-- 应急指挥 -->
                                <li id="command" class="every-block" @click="clickBigBlock(3)">
                                    <div class="block-content">
                                        <div class="block-image">
                                            <img src="" alt="">
                                        </div>
                                        <p>应急指挥</p>
                                    </div>
                                </li>
                                <!-- 互联网+监管 -->
                                <li id="internet" class="every-block" @click="clickBigBlock(4)">
                                    <div class="block-content">
                                        <div class="block-image">
                                            <img src="" alt="">
                                        </div>
                                        <p>互联网+监管</p>
                                    </div>
                                </li>
                            </ul>
                            <ul>
                                <!-- 督导考核 -->
                                <li id="assessment" class="every-block" @click="clickBigBlock(5)">
                                    <div class="block-content">
                                        <div class="block-image">
                                            <img src="" alt="">
                                        </div>
                                        <p>督导考核</p>
                                    </div>
                                </li>
                                <!-- 行业应用 -->
                                <li id="application" class="every-block" @click="clickBigBlock(6)">
                                    <div class="block-content">
                                        <div class="block-image">
                                            <img src="" alt="">
                                        </div>
                                        <p>行业应用</p>
                                    </div>
                                </li>
                                <!-- 城维大数据 -->
                                <li id="bigData" class="every-block" @click="clickBigBlock(7)">
                                    <div class="block-content">
                                        <div class="block-image">
                                            <img src="" alt="">
                                        </div>
                                        <p>城维大数据</p>
                                    </div>
                                </li>
                                <!-- 公众参与 -->
                                <li id="public" class="every-block" @click="clickBigBlock(8)">
                                    <div class="block-content">
                                        <div class="block-image">
                                            <img src="" alt="">
                                        </div>
                                        <p>公众参与</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="right-content-row">
                        <!-- 道路数据 -->
                        <div class="road-statistic">
                            <div class="road-number">
                                <span class="road-name">道路数量</span>
                                <span id="roadNumber" @click="clickNumber(1)"></span>
                                <span class="road-unit">条</span>
                            </div>
                            <ul class="length-area">
                                <li class="road-length">
                                    <span class="road-name">道路长度</span>
                                    <span id="lengthNumber"> 266.98</span>
                                    <span class="road-unit">km</span>
                                </li>
                                <li class="road-area">
                                    <span class="road-name">道路面积</span>
                                    <span id="roadArea"> 6.25</span>
                                    <span class="road-unit">km²</span>
                                </li>
                            </ul>
                        </div>
                        <!-- 道路统计图 -->
                        <div id="roadOtherChart"></div>
                        <!-- 道路统计图下光点 -->
                        <div class="road-bottom-light"></div>
                        <!-- 分类统计数据 -->
                        <div class="class-statistics">
                            <ul>
                                <li>住宅：<span>272 个</span></li>
                                <li>学校：<span>9 个</span></li>
                                <li>医院：<span>12 个</span></li>
                            </ul>
                            <ul>
                                <li>商务办公：<span>21 个</span></li>
                                <li>综合广场：<span>81 个</span></li>
                                <li>公园广场：<span>12 个</span></li>
                            </ul>
                        </div>
                        <!-- 建成区相关数据 -->
                        <ul class="built-area">
                            <li class="">建成区道路网密度：<span>6.4 km / km²</span></li>
                            <li class="">建成区公园绿地半径覆盖率：<span>65.54 %</span></li>
                            <li class="">建成区绿地覆盖率：<span>87.34 %</span></li>
                        </ul>
                        <!-- 子系统入口区域 -->
                        <div class="subsystem-entry">
                            <div class="entry-name">
                                <span @click="toThisPage(0)">城市管理大数据</span>
                            </div>
                            <ul class="to-subsystem">
                                <li class="environment">
                                    <img src="../assets/img/home/environment.png" alt="环卫">
                                    <span @click="toThisPage(1)">环卫</span>
                                </li>
                                <li class="green">
                                    <img src="../assets/img/home/green.png" alt="绿化">
                                    <span @click="toThisPage(2)">绿化</span>
                                </li>
                                <li class="city">
                                    <img src="../assets/img/home/city.png" alt="市政">
                                    <span @click="toThisPage(3)">市政</span>
                                </li>
                                <li class="burning-heat">
                                    <img src="../assets/img/home/heat.png" alt="热燃">
                                    <span @click="toThisPage(4)">燃热</span>
                                </li>
                                <li class="brightening">
                                    <img src="../assets/img/home/brightening.png" alt="亮化">
                                    <span @click="toThisPage(5)">亮化</span>
                                </li>
                                <li class="law-enforce">
                                    <img src="../assets/img/home/law-enforce.png" alt="执法">
                                    <span @click="toThisPage(6)">执法</span>
                                    <!--<img src="../assets/img/home/garbage.png" alt="垃圾">-->
                                    <!--<span>垃圾</span>-->
                                </li>
                            </ul>
                            <div class="bottom-standard">城市管理标准</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data () {
            return {

            }
        },
        methods: {
            /**
             * Description:点击数字滚动
             * Author:ybt
             * Date:2020/12/16
             */
            clickNumber(type){
                if (type === 0) {
                    // 管辖面积——数字滚动
                    this.createDom();
                } else if (type === 1) {
                    this.createRoadDom();
                }
            },
            /**
             * Description: 创建渲染数字DOM元素
             * Author:ybt
             * Date:2020/12/16
             */
            createDom(){
                let orderNum = ["0", "0", "0", "0"];
                let str = '';
                for (let i = 0; i < orderNum.length; i++) {
                    if (!isNaN(orderNum[i])) {
                        str += '<li class="number-item">' +
                            '<span><i class="numberItem">0123456789</i></span>' +
                            '</li>'
                    } else {
                        str += '<li>' +
                            '<span class="comma">' + orderNum[i] +'</span>' +
                            '</li>'
                    }
                }
                document.getElementById("areaNumber").innerHTML = str;
                setTimeout(() => {
                    this.initDigitalScroll(1079);
                }, 400)
            },
            /**
             * Description:数字格式化处理
             * Author:ybt
             * Date:2020/12/16
             */
            initDigitalScroll(num) {
                let orderNum = null;
                num = num.toString();
                // 把数字变成字符串
                if (num.length < 4) {
                    num = "0" + num; // 如未满四位数，添加"0"补位
                    this.initDigitalScroll(num); // 递归添加"0"补位
                } else if (num.length === 4) {
                    orderNum = num.split(""); // 将其便变成数据，渲染至滚动数组
                }
                this.setNumberTransform(orderNum);
            },
            /**
             * Description:结合CSS 对数字字符进行滚动,显示数量
             * Author:ybt
             * Date:2020/12/16
             */
            setNumberTransform(orderNum) {
                const numberItems = document.getElementsByClassName("numberItem"); // 计算元素数量
                const numberArr = orderNum.filter(item => !isNaN(item));
                for (let index = 0; index < numberItems.length; index++) {
                    const elem = numberItems[index];
                    elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`;
                }
            },
            /**
             * Description:初始化“各街办面积”统计图
             * Author:ybt
             * Date:2020/12/16
             */
            initStreetMap () {
                //初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("streetMap"));
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        show: true,
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        },
                    },
                    grid: {
                        left: '3%',
                        right: '10%',
                        bottom: '-8%',
                        top: '2%',
                        containLabel: true
                    },
                    xAxis: {
                        show: false,
                    },
                    yAxis: {
                        inverse: true,
                        splitLine: {
                            show: false
                        },
                        axisLine: { //y轴
                            show: false
                        },
                        type: 'category',
                        axisTick: {
                            show: false
                        },
                        data: ['集贤', '九峰', '秦渡', '兴隆', '细柳', '丈八', '庞光', '灵沼', '五星', '草堂', '东大', '鱼化'],
                        axisLabel: {
                            color: '#fff',
                            fontSize: 14
                        }
                    },
                    series: [{
                        name: '街办面积',
                        type: 'bar',
                        barWidth: 10, // 柱子宽度
                        label: {
                            show: true,
                            position: 'right', // 位置
                            fontSize: 14,
                            fontWeight: 'bold', // 加粗
                            distance: 5 // 距离
                        }, // 柱子上方的数值
                        itemStyle: {
                            barBorderRadius: [0, 3, 3, 0], // 圆角（左上、右上、右下、左下）
                            color: (params) => {
                                if (params.value <= 50) {
                                    return '#92aa74'
                                } else if (params.value <= 100) {
                                    return '#d8b346'
                                } else if (params.value <= 200) {
                                    return '#d87c46'
                                } else {
                                    return '#d84646'
                                }
                            }
                        },
                        data: [284, 106, 51, 39, 37, 29, 28, 27, 25, 25, 20, 15]
                    }, ]
                };
                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
                window.addEventListener("resize", () => {
                    myChart.resize();
                });
            },
            /**
             * Description:创建渲染数字DOM元素
             * Author:ybt
             * Date:2020/12/16
             */
            createRoadDom(){
                let orderNum = ["0", "0", "0"];
                let str = '';
                for (let i = 0; i < orderNum.length; i++) {
                    if (!isNaN(orderNum[i])) {
                        str += '<li class="road-item">' +
                            '<span><i class="roadItem">0123456789</i></span>' +
                            '</li>'
                    } else {
                        str += '<li>' +
                            '<span class="comma">' + orderNum[i] +'</span>' +
                            '</li>'
                    }
                }
                document.getElementById("roadNumber").innerHTML = str;
                setTimeout(() => {
                    this.initRoadScroll(177);
                }, 400)
            },
            /**
             * Description:数字格式化处理
             * Author:ybt
             * Date:2020/12/16
             */
            initRoadScroll(num) {
                let orderNum = null;
                num = num.toString();
                // 把数字变成字符串
                if (num.length < 3) {
                    num = "0" + num; // 如未满四位数，添加"0"补位
                    this.initRoadScroll(num); // 递归添加"0"补位
                } else if (num.length === 3) {
                    orderNum = num.split(""); // 将其便变成数据，渲染至滚动数组
                }
                this.setTransformRoad(orderNum);
            },
            /**
             * Description:结合CSS 对数字字符进行滚动,显示数量
             * Author:ybt
             * Date:2020/12/16
             */
            setTransformRoad(orderNum) {
                const numberItems = document.getElementsByClassName("roadItem"); // 计算元素数量
                const numberArr = orderNum.filter(item => !isNaN(item));
                for (let index = 0; index < numberItems.length; index++) {
                    const elem = numberItems[index];
                    elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`;
                }
            },
            /**
             * Description:初始化道路相关统计图
             * Author:ybt
             * Date:2020/12/16
             */
            initRoadOtherChart(){
                let myChart = this.$echarts.init(document.getElementById('roadOtherChart'));
                let option = {
                    grid: {
                        left: '2%',
                        right: '0%',
                        top: '20%',
                        bottom: '0%',
                        containLabel: true
                    },
                    legend: {
                        x: 'right',
                        right: '0%',
                        textStyle: {
                            color: '#fff'
                        },
                        itemWidth: 12,
                        itemHeight: 12,
                    },
                    tooltip: {},
                    dataset: {
                        dimensions: ['product', '主干道', '次干道', '背街小巷'],
                        source: [
                            {product: '道路数量', '主干道': 1000, '次干道': 500, '背街小巷': 500},
                            {product: '道路长度', '主干道': 1000, '次干道': 500, '背街小巷': 500},
                            {product: '道路面积', '主干道': 1000, '次干道': 500, '背街小巷': 500}
                        ]
                    },
                    xAxis: {
                        type: 'category',
                        // 坐标轴刻度标签
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff',
                                fontSize: 15,
                            }
                        },
                        axisTick: {
                            show: false //隐藏X轴刻度
                        },
                        // 坐标轴分割线
                        splitLine: {
                            show: false,
                        },
                        // 坐标轴轴线
                        axisLine: {
                            show: true,
                            lineStyle: {
                                width: 2,
                                color: '#213c76'
                            }
                        }
                    },
                    yAxis: {
                        // 坐标轴刻度标签
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        axisTick: {
                            show: false //隐藏X轴刻度
                        },
                        // 坐标轴分割线
                        splitLine: {
                            show: false,
                        },
                        // 坐标轴轴线
                        axisLine: {
                            show: true,
                            lineStyle: {
                                width: 2,
                                color: '#213c76'
                            }
                        }
                    },
                    series: [
                        {
                            type: 'bar',
                            itemStyle: {
                                color: new this.$echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#F3CD2C'},
                                        {offset: 1, color: '#CD9406'}
                                    ]
                                )
                            },
                            barWidth:17
                        },
                        {
                            type: 'bar',
                            itemStyle: {
                                color: new this.$echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#2DA9F2'},
                                        {offset: 1, color: '#0B8ED7'}
                                    ]
                                )
                            },
                            barWidth:17
                        },
                        {
                            type: 'bar',
                            itemStyle: {
                                color: new this.$echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#54d28a'},
                                        {offset: 1, color: '#23ac48'}
                                    ]
                                )
                            },
                            barWidth:17
                        }
                    ]
                };
                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
                window.addEventListener('resize', () => {
                    myChart.resize()
                })
            },
            /**
             * Description:大模块点击
             * Author:ybt
             * Date:2020/12/16
             */
            clickBigBlock(type){
                $('.every-item').addClass('animate__animated animate__backOutUp');
                let idArray= ['partyBuilding', 'cityManagement', 'command', 'internet', 'assessment', 'application', 'bigData', 'public'];
                let itemData = {
                    // 党建引领
                    'partyBuilding': ['组织架构', '党建活动'],
                    // 数字化城管
                    'cityManagement': ['数字城管', '案件统计', '区域分析', '地理编码', '协同作业'],
                    // 应急指挥
                    'command': ['应急预警', '指挥调度'],
                    // 互联网+监管
                    'internet': ['迎全运', '供热监管', '垃圾分类', '门前三包', '工程监管', '违建拆除', '背街小巷', '每周曝光'],
                    // 督导考核
                    'assessment': ['督导', '考核'],
                    // 行业应用
                    'application': ['市容环卫管理系统', '市政设施管理系统', '园林绿化管理系统', '综合执法管理系统', '夜景亮化管理系统', '燃气热力管理系统'],
                    // 城维大数据
                    'bigData': ['城市路网', '城市兴趣点', '城市指数'],
                    // 公众参与
                    'public': ['12345', '全民城管', '市民服务'],
                };
                idArray.forEach((item, index) => {
                    if (index === type - 1) {
                        $('#' + idArray[type - 1]).addClass('is-active');
                        let str = require('../assets/img/home/' + (index + 1) + '-2-logo.png');
                        $('#' + idArray[index] + ' img').attr('src', str);
                    } else {
                        $('#' + item).removeClass('is-active');
                        let str = require('../assets/img/home/' + (index + 1) + '-1-logo.png');
                        $('#' + idArray[index] + ' img').attr('src', str);
                    }
                });
                setTimeout(() => {
                    let htmlStr = '';
                    let everyBox = '<span class="every-item-box">';
                    itemData[idArray[type - 1]].forEach((item,index) => {
                        if (itemData[idArray[type - 1]].length <= 4) {
                            let everyStr ='<div class="every-item"><div class="every-item-block"><span id="' + idArray[type - 1] + index + '" onclick="clickSmallBlock(' + index + ')">';
                            everyStr += item + '</span></div></div>';
                            everyBox += everyStr;
                        } else if (itemData[idArray[type - 1]].length  === 5 || itemData[idArray[type - 1]].length  === 6 || itemData[idArray[type - 1]].length  === 9) {
                            let everyStr ='<div class="every-item"><div class="every-item-block"><span id="' + idArray[type - 1] + index + '" onclick="clickSmallBlock(' + index + ')">';
                            everyStr += item + '</span></div></div>';
                            everyBox += everyStr;
                            if (index === 2 || index === 5) {
                                everyBox += '</span><span class="item-box-f-s">';
                            }
                        } else if (itemData[idArray[type - 1]].length  === 7 || itemData[idArray[type - 1]].length  === 10 || itemData[idArray[type - 1]].length  === 11) {
                            let everyStr ='<div class="every-item"><div class="every-item-block"><span id="' + idArray[type - 1] + index + '" onclick="clickSmallBlock(' + index + ')">';
                            everyStr += item + '</span></div></div>';
                            everyBox += everyStr;
                            if (index === 3 || index === 7) {
                                everyBox += '</span><span class="item-box-seven">';
                            }
                        } else {
                            let everyStr ='<div class="every-item"><div class="every-item-block"><span id="' + idArray[type - 1] + index + '" onclick="clickSmallBlock(' + index + ')">';
                            everyStr += item + '</span></div></div>';
                            everyBox += everyStr;
                        }
                    });
                    htmlStr += everyBox + '</span>';
                    document.getElementById('smallBlockHtml').innerHTML = '';
                    if (htmlStr === '<span class="every-item-box"></span>') {
                        document.getElementById('smallBlockHtml').innerHTML = '<p class="empty">敬请期待</P>';
                    } else {
                        document.getElementById('smallBlockHtml').innerHTML = htmlStr;
                    }
                    $('.every-item').addClass('animate__animated animate__backInUp');
                    window.clickSmallBlock = (index) => {
                        if (idArray[type - 1] + index === 'internet2') {
                            const { href } = this.$router.resolve({
                                path: "/garbageClass/index",
                                name: 'GarbageClass'
                            });
                            window.open(href, '_blank');
                        }
                    }
                }, 400);
            },
            /**
             * Description:跳转其他大屏页面
             * Author:ybt
             * Date:2020/12/16
             */
            toThisPage(type){
                if (type === 0) {
                    const { href } = this.$router.resolve({
                        path: "/cityManage/index",
                        name: 'CityManage'
                    });
                    window.open(href, '_blank');
                } else if (type === 1) {
                    const { href } = this.$router.resolve({
                        path: "/sanitation/index",
                        name: 'Sanitation'
                    });
                    window.open(href, '_blank');
                } else if (type === 2) {
                    const { href } = this.$router.resolve({
                        path: "/green/index",
                        name: 'Green'
                    });
                    window.open(href, '_blank');
                } else if (type === 3) {
                    const { href } = this.$router.resolve({
                        path: "/municipal/index",
                        name: 'Municipal'
                    });
                    window.open(href, '_blank');
                } else if (type === 4) {
                    const { href } = this.$router.resolve({
                        path: "/heat/index",
                        name: 'Heat'
                    });
                    window.open(href, '_blank');
                } else if (type === 5) {
                    const { href } = this.$router.resolve({
                        path: "/bright/index",
                        name: 'Bright'
                    });
                    window.open(href, '_blank');
                } else if (type === 6) {

                }

            },
            /**
             * Description:退出登录
             * Author:ybt
             * Date:2020/12/16
             */
            loginOut(){
                sessionStorage.clear();
                this.$router.push({
                    path: "/Login",
                    name: 'Login'
                });
            },
            /**
             * Description:垃圾分类点击触发
             * Author:ybt
             * Date:2020/12/18
             */
            internet2(){
                console.log(66666);
            }
        },
        mounted(){
            // 管辖面积——数字滚动
            this.createDom();
            // 初始化“各街办面积”统计图
            this.initStreetMap();
            // 道路数量——数字滚动
            this.createRoadDom();
            // 初始化道路相关统计图
            this.initRoadOtherChart();

            this.clickBigBlock(2);
        }
    };
</script>
<style lang="less">
    .home-page{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        background: url(../assets/img/home/bg.png) no-repeat;
        /* 头部样式 */
        header {
            height: 1.6rem; // 128px
            padding-top: 0.5rem;
            position: relative;
            background: linear-gradient(to bottom, rgba(2, 6, 94, 1),rgba(4, 9, 63, 0));
            z-index: 99;
            .title-name{
                height: 1.125rem;
                line-height: 1.125rem;
                text-align: center;
                span {
                    font-size: 0.7125rem;
                    /* 引入外部字体样式 */
                    font-family: 'MF-FangHei';
                    background: linear-gradient(to right, #0178f7, #00ebfe, #00ebfe, #00a9ff);
                    -webkit-background-clip: text;
                    color: transparent;
                }
            }
            .header-bg{
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 0.7375rem;
                background: url(../assets/img/home/header-border.png) no-repeat;
                background-size: 100% 100%;
            }
            .bottom-light{
                position: absolute;
                bottom: -0.8125rem;
                left: calc(50% - 4.7875rem);
                width: 9.5875rem;
                height: 1.6625rem;
                background: url(../assets/img/home/big-light.png) no-repeat;
                background-size: 100% 100%;
                z-index: 100;
            }
            .logo{
                position: absolute;
                top: 0.25rem;
                left: 0.375rem;
                width: 1.2rem;
                height: 0.45rem;
                background: url(../assets/img/home/logo.png) no-repeat;
                background-size: 100% 100%;
                z-index: 100;
            }
            .sign-out{
                position: absolute;
                right: 24px;
                top: 24px;
                width: 24px;
                height: 24px;
                background: url(../assets/img/home/sign-out.png) no-repeat;
                background-size: 100% 100%;
                cursor: pointer;
            }
        }

        /* 主体内容样式 */
        .main-box{
            display: flex;
            flex: 1;
            font-family: 'FZLTZH_GBK';
            .content-area{
                display: flex;
                flex: 1;
            }
            .content-area-info{
                display: flex;
                flex-direction: row;
                flex: 1;
                margin-top: -0.6625rem;
                overflow: hidden;
                .left-content-row{
                    display: flex;
                    flex-direction: column;
                    width: 4.275rem; // 342px
                    z-index: 101;
                    overflow: hidden;
                }
                .center-content-row{
                    display: flex;
                    flex-direction: column;
                    width: 15.05rem; // 1204px
                    overflow: hidden;
                }
                .right-content-row{
                    display: flex;
                    flex-direction: column;
                    width: 4.675rem; // 374px
                    z-index: 101;
                    overflow: hidden;
                }
            }
        }
        /* 左区域内容样式 */
        .left-content-row{
            .total-area {
                display: flex;
                flex-direction: column;
                z-index: 100;
                padding: 0.3125rem 0 0 0.375rem;
                width: 100%;
                height: 1.4rem; // 112px
                &>li{
                    display: flex;
                    flex-direction: row;
                    align-items: flex-end;
                    flex: 1;
                    color: #fff;
                    font-size: 0.2625rem; // 18px
                    .area-name {
                        margin-right: 0.125rem;
                    }
                    #areaNumber .number-item{
                        background: #fe6923 !important;
                        border: 1px solid #fe6923 !important;
                    }
                    .area-number {
                        position: relative;
                        font-size: 0.375rem; // 30px
                        text-align: center;
                        color: #fff;
                        writing-mode: vertical-lr;
                        text-orientation: upright;
                        /*文字禁止编辑*/
                        -moz-user-select: none; /*火狐*/
                        -webkit-user-select: none; /*webkit浏览器*/
                        -ms-user-select: none; /*IE10*/
                        -khtml-user-select: none; /*早期浏览器*/
                        user-select: none;
                        cursor: pointer;
                        /*滚动数字设置*/
                        .number-item {
                            width: 0.375rem;
                            height: 0.5rem;
                            list-style: none;
                            margin-right: 0.0625rem;
                            background: #ffa529;
                            border-radius: 0.05rem;
                            border: 1px solid #ffa529;
                            & > span {
                                position: relative;
                                display: inline-block;
                                margin-right: 0.075rem;
                                width: 100%;
                                height: 100%;
                                writing-mode: vertical-rl;
                                text-orientation: upright;
                                overflow: hidden;
                                & > i {
                                    font-style: normal;
                                    position: absolute;
                                    top: 0.025rem;
                                    left: 50%;
                                    transform: translate(-50%, 0);
                                    transition: transform 1s ease-in-out;
                                    letter-spacing: 0.125rem;
                                }
                            }
                        }
                    }
                    #coreAreaNumber{
                        color: #fd6f2b;
                        font-size: 0.3rem;
                        margin-right: 0.125rem;
                    }
                    .area-unit {
                        font-size: 0.225rem;
                    }
                }
                .core-area{
                    margin-top: 0.25rem;
                }
            }
            .map-top-light,.map-bottom-light{
                width: 4.1625rem;
                height: 0.825rem;
                background: url(../assets/img/home/left-light.png) no-repeat;
                background-size: 100% 100%;
            }
            .boundary-box{
                width: 100%;
                /*height: 4.1rem; // 328px*/
                height: calc(44% - 1.525rem);
                padding: 0.2125rem 0 0 0.375rem;
                .boundary-name{
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    color: #fff;
                    padding-right: 0.375rem;
                    span{
                        font-size: 0.2375rem;
                    }
                }
                #boundaryMap{
                    /*height: 3.8375rem; // 307px*/
                    display: flex;
                    flex: 1;
                    justify-content: center;
                    align-items: center;
                    .boundary-map{
                        width: 3.75rem;
                        height: 3.6rem;
                        background: url(../assets/img/home/boundary-map.png) no-repeat;
                        background-size: 100% 100%;
                    }
                    img{
                        height: 2.9125rem;
                    }
                }
            }
            .street-box{
                width: 100%;
                /*height: 5.4rem; // 432px*/
                height: calc(56% - 1.525rem);
                padding: 0.2125rem 0 0.375rem 0.375rem;
                display: flex;
                flex-direction: column;
                .street-name{
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    color: #fff;
                    padding-right: 0.375rem;
                    span:first-of-type{
                        font-size: 0.2375rem;
                    }
                    span:last-of-type{
                        font-size: 0.15rem;
                    }
                }
                #streetMap{
                    /*height: 4.55rem; // 364px*/
                    flex: 1;
                }
            }
        }

        /* 中间区域内容样式 */
        .center-content-row{
            padding-top: 1.4rem; // 112px
            .center-top-box{
                position: relative;
                width: 100%;
                /*height: 6.025rem;  // 482px*/
                flex: 1;
                .small-blocks{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;  // 482px
                    border-bottom: 1px solid #09a7ea;
                    background: linear-gradient(to bottom, rgba(26,26,219,0) 0%,rgba(6,27,242,.4) 100%);
                    overflow: hidden;
                    z-index: 10;
                    .left-border{
                        position: absolute;
                        top: 0;
                        left: -0.13rem;
                        width: 0.3rem;
                        height: 6.025rem;
                        background: url(../assets/img/home/left-border.png) no-repeat;
                        background-size: 100% 100%;
                    }
                    .right-border{
                        position: absolute;
                        top: 0;
                        right: -0.14rem;
                        width: 0.3rem;
                        height: 6.025rem;
                        background: url(../assets/img/home/left-border.png) no-repeat;
                        background-size: 100% 100%;
                    }
                    .overflow-hidden{
                        width: 100%;
                        height: 100%;
                        overflow: hidden;
                        display: flex;
                        flex-direction: column;
                        // flex-wrap: wrap;
                        justify-content: center;
                        // align-content: center;
                        .every-item-box{
                            display: flex;
                            flex-direction: row;
                            flex-wrap: wrap;
                            justify-content: center;
                            align-content: center;
                        }
                        .item-box-f-s{
                            display: flex;
                            flex-direction: row;
                            justify-content: flex-start;
                            padding-left: 2.35rem;
                        }
                        .item-box-seven{
                            display: flex;
                            flex-direction: row;
                            justify-content: flex-start;
                            padding-left: 0.625rem;
                        }
                        .every-item{
                            width: 3.45rem;
                            height: 1.725rem; // 138px
                            overflow: hidden;
                            .every-item-block{
                                width: 3.45rem;
                                height: 1.8875rem;
                                background: url(../assets/img/home/center-top.png) no-repeat;
                                background-size: 100% 100%;
                                text-align: center;
                                user-select: none;
                                padding: 10px 15px 60px 15px;
                                display: flex;
                                span{
                                    display: flex;
                                    flex: 1;
                                    justify-content: center;
                                    align-items: center;
                                    cursor: pointer;
                                    font-size: 0.35rem;
                                    color: #00e0ff;
                                    font-family: auto;
                                    &:hover{
                                        color: #f0c829;
                                    }
                                }
                                #internet3,#assessment0,#public0,#public1,#public2{
                                    color: #dbdbdb!important;
                                    cursor: no-drop !important;
                                }
                            }
                        }
                        .empty{
                            font-size: 0.35rem;
                            color: #00e0ff;
                            font-family: auto;
                            text-align: center;
                            letter-spacing: 0.125rem;
                        }
                    }
                }
                .bottom-triangle{
                    position: absolute;
                    bottom: -1.3rem;
                    left: calc(50% - 5.35rem);
                    width: 10.7rem; // 856px
                    height: 2.7125rem; // 217px
                    background: url(../assets/img/home/triangle.png) no-repeat;
                    background-size: 100% 100%;
                    z-index: 9;
                }
            }
            .big-blocks{
                width: 100%;
                height: 5.125rem; // 410px
                padding-bottom: 0.375rem;
                padding-top: 0.35rem;
                display: flex;
                flex-direction: column;
                ul{
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    padding: 0 0.125rem;
                    .every-block{
                        width: 3.275rem;
                        height: 2.9375rem;
                        background: url(../assets/img/home/big-border.png) no-repeat;
                        background-size: 100% 100%;
                        padding: 0.9rem 0.175rem 0.4875rem 0.1875rem;
                        user-select: none;
                        .block-content{
                            width: 100%;
                            height: 100%;
                            cursor: pointer;
                            display: flex;
                            flex-direction: column;
                            .block-image{
                                height: 0.75rem;
                                display: flex;
                                flex-direction: row;
                                justify-content: center;
                                align-items: flex-end;
                            }
                            p{
                                color: #ffffff;
                                font-size: 0.3875rem;
                                font-family: auto;
                                text-align: center;
                                line-height: 0.625rem;
                            }
                        }
                    }
                    li + li{
                        margin-left: 0.5375rem;
                    }
                    li:hover{
                        background: url(../assets/img/home/hover-big-border.png) no-repeat !important;
                        background-size: 100% 100%;
                    }
                    .is-active{
                        background: url(../assets/img/home/hover-big-border.png) no-repeat !important;
                        background-size: 100% 100%;
                        p{
                            color: #07f3ee !important;
                        }
                    }
                    #partyBuilding img{
                        width: 0.425rem;
                        height: 0.4rem;
                    }
                }
                ul:first-of-type{
                    z-index: 10;
                }
                ul:last-of-type{
                    margin-top: -1rem;
                    z-index: 1;
                }
            }
        }
        /* 右区域内容样式 */
        .right-content-row{
            padding: 0.3125rem 0.25rem 0.375rem 0.3125rem;
            .road-statistic{
                display: flex;
                flex-direction: column;
                border-bottom: 1px solid #1b5e97;
                padding-bottom: 0.1875rem;
                .road-number{
                    display: flex;
                    flex-direction: row;
                    align-items: flex-end;
                    flex: 1;
                    color: #fff;
                    font-size: 0.2625rem; // 21px
                    .road-name {
                        margin-right: 0.125rem;
                    }
                    #roadNumber .road-item{
                        background: #fe6923 !important;
                        border: 1px solid #fe6923 !important;
                    }
                    #roadNumber {
                        position: relative;
                        font-size: 0.375rem; // 30px
                        text-align: center;
                        color: #fff;
                        writing-mode: vertical-lr;
                        text-orientation: upright;
                        /*文字禁止编辑*/
                        -moz-user-select: none; /*火狐*/
                        -webkit-user-select: none; /*webkit浏览器*/
                        -ms-user-select: none; /*IE10*/
                        -khtml-user-select: none; /*早期浏览器*/
                        user-select: none;
                        cursor: pointer;
                        /*滚动数字设置*/
                        .road-item {
                            width: 0.375rem;
                            height: 0.5rem;
                            list-style: none;
                            margin-right: 0.0625rem;
                            background: #ffa529;
                            border-radius: 0.05rem;
                            border: 1px solid #ffa529;
                            & > span {
                                position: relative;
                                display: inline-block;
                                margin-right: 0.075rem;
                                width: 100%;
                                height: 100%;
                                writing-mode: vertical-rl;
                                text-orientation: upright;
                                overflow: hidden;
                                & > i {
                                    font-style: normal;
                                    position: absolute;
                                    top: 0.025rem;
                                    left: 50%;
                                    transform: translate(-50%, 0);
                                    transition: transform 1s ease-in-out;
                                    letter-spacing: 0.125rem;
                                }
                            }
                        }
                    }
                    .road-unit {
                        font-size: 0.225rem;
                    }
                }
                .length-area{
                    display: flex;
                    flex-direction: row;
                    color: #fff;
                    font-size: 0.2rem;
                    margin-top: 0.25rem;
                    line-height: 0.4rem;
                    #lengthNumber,#roadArea{
                        color: #fd6f2b;
                        font-size: 0.2rem;
                        margin-right: 0.0625rem;
                    }
                    .road-length{
                        padding-right: 0.1875rem;
                    }
                    .road-area{
                        border-left: 1px solid #1b5e97;
                        padding-left: 0.1875rem;
                    }
                    .road-unit {
                        font-size: 0.175rem;
                    }
                }
            }
            #roadOtherChart{
                width: 100%;
                /*height: 2.75rem; // 220px*/
                height: calc(40% - 2.15rem);
                padding-top: 0.3rem;
                /*padding-bottom: 0.125rem;*/
            }
            .road-bottom-light{
                width: 4.65rem;
                height: 0.825rem;
                background: url(../assets/img/home/right-light.png) no-repeat;
                background-size: 100% 100%;
            }
            .class-statistics{
                /*height: 1.375rem; // 110px*/
                height: calc(30% - 2rem);
                padding: 5px 0;
                display: flex;
                flex-direction: row;
                ul{
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    li{
                        display: flex;
                        flex-direction: row;
                        flex-wrap: nowrap;
                        /*line-height: 0.575rem;*/
                        flex: 1;
                        font-size: 0.2125rem;
                        font-family: auto;
                        color: #ffffff;
                        span{
                            color: #f6c000;
                        }
                    }
                }
                ul:first-of-type{
                    padding-right: 0.1875rem;
                }
                ul:last-of-type{
                    padding-left: 0.3125rem;
                    border-left: 1px solid #1b94e8;
                }
            }
            .built-area{
                margin-top: 0.25rem;
                margin-bottom: -0.25rem;
                padding-top: 0.125rem;
                border-top: 1px solid #1b94e8;
                height: calc(33% - 2.15rem);
                display: flex;
                flex-direction: column;
                li{
                    font-size: 0.2125rem;
                    font-family: auto;
                    color: #ffffff;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    flex: 1;
                    span{
                        color: #f6c000;
                    }
                }
            }
            .subsystem-entry{
                width: 4.65rem;
                height: 4.275rem;
                background: url(../assets/img/home/entry.png) no-repeat;
                background-size: 100% 100%;
                margin-left: -0.225rem;
                margin-bottom: -0.375rem;
                padding: 0.4125rem 0.225rem;
                .entry-name{
                    width: 100%;
                    height: 0.7875rem; // 63px
                    line-height: 0.7875rem;
                    text-align: center;
                    color: #00e9ff;
                    font-size: 0.35rem;
                    font-family: auto;
                    border-bottom: 1px solid #1b94e8;
                    span{
                        cursor: pointer;
                    }
                }
                .to-subsystem{
                    width: 100%;
                    height: 1.95rem; // 156px
                    padding: 0.25rem;
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    li{
                        display: flex;
                        flex-direction: row;
                        justify-content: center;
                        align-items: center;
                        width: 33.33%;
                        color: #00e9ff;
                        font-size: 0.25rem;
                        span{
                            margin-left: 0.125rem;
                            cursor: pointer;
                        }
                    }
                    .law-enforce{
                        cursor: no-drop !important;
                        img{
                            width: 0.4rem;
                            height: 0.4rem;
                            cursor: no-drop !important;
                        }
                        span{
                            color: #dbdbdb;
                            cursor: no-drop !important;
                        }
                    }
                }
                .bottom-standard{
                    width: 100%;
                    height: 0.7125rem; // 57px
                    line-height: 0.7125rem;
                    text-align: center;
                    color: #00e9ff;
                    font-size: 0.2875rem;
                    border-top: 1px solid #1b94e8;
                }
            }
        }
    }
</style>
